<div class="city__weather">
    <div class="city__weather-head">
        <a href="#" id="wp-link" focus-helper focus-id="focus.ci" ng-keydown="move($event)">天气预报</a>
        <a href="#" id="wn-link" focus-helper focus-id="focus.ci" ng-keydown="move($event)">预警信息<p id="wn-line"></p></a>
        <div ng-if="page[control.page]=='prediction'">
            <p class="area">{{curCity.cityName}}</p>
            <p class="update-time">{{data.time}}时更新</p>
        </div>
        <p class="separator"></p>
    </div>
    <div class="city__weather-prediction" ng-hide="page[control.page]!='prediction'">
        <loading load-top="200px" ng-if="panel.load"></loading>
        <p id="canvas-top" class="separator"></p>
        <p id="canvas-bottom" class="separator"></p>
        <div class="mask"></div>
        <ul class="city__wp-tl">
            <li class="city__wp-tl-item" ng-repeat="d in data.date">
                <span class="week">{{d.week}}</span>
                <span class="day">{{d.day}}</span>
            </li>
        </ul>
        <ul class="city__wp-dl">
            <li class="city__wp-dl-item" ng-repeat="w in data.weather">
                <p class="top">
                    <span class="icon" ng-class="'city__' + PredictionMap[w.weatherid]"></span>
                    <span class="name">{{w.weather}}</span>
                </p>
                <p class="bottom">
                    <span class="wind">{{w.windD}}</span>
                    <span class="level">{{w.windS.replace('到', '-')}}</span>
                </p>
            </li>
        </ul>
        <canvas id="weather_draw" width="1108" height="245"></canvas>
    </div>
    <div class="city__weather-warning" ng-hide="page[control.page]!='warning'">
        <div class="separator"></div>
        <div class="city__weather-wh">
            <ul class="city__ww-tl">
                <li class="city__ww-tl-item">
                    <a href="#" id="ww-1" focus-helper focus-id="focus.ci"
                       ng-keydown="move($event)" ng-class="{'hold': control.hold==1}">
                        全市预警 ({{data.cityWarning.length}})
                        <p class="separator" ng-hide="control.hold!=0"></p>
                    </a>
                </li>
                <li class="city__ww-tl-item">
                    <a href="#" id="ww-2" focus-helper focus-id="focus.ci"
                       ng-keydown="move($event)" ng-class="{'hold': control.hold==2}">
                        全省预警 ({{data.provinceWarning.length}})
                        <p class="separator" ng-hide="control.hold==2"></p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="city__weather-wb">
            <ul class="city__ww-dl">
                <li class="city__ww-dl-item" ng-repeat="w in data.curWarning track by $index">
                    <a href="#" id="dli-{{$index}}" focus-helper focus-id="focus.ci"
                       ng-keydown="move($event, viewWarningDetail)">
                        <p class="icon"
                           ng-style="{'background': 'url(./themes/theme/img/weather/gif/' + w.YjHissignal.substr(0, 4) +'.gif) center no-repeat'}"></p>
                        <p class="title">{{w.YjTitle}}</p>
                        <p class="time">{{w.YjIssuedate | mul_date:1}}</p>
                        <p class="separator"></p>
                    </a>
                </li>
            </ul>
            <loading load-top="200px" ng-if="panel.load"></loading>
            <no-info ni-top="200px" ng-if="panel.empty"></no-info>
        </div>
    </div>
    <div class="city__mask city__weather-mask" ng-if="control.mask">
        <div class="city__weather-scroll">
            <div class="city__weather-mh">
                <p class="icon"
                   ng-style="{'background': 'url(./themes/theme/img/weather/gif/' + data.warningDetail.icon.substr(0, 4) +'.gif) center no-repeat'}"></p>
                <p class="title">{{data.warningDetail.title}}</p>
                <p class="update-time">发布时间：{{data.warningDetail.updateTime | mul_date:1}}</p>
            </div>
            <div class="city__weather-mb">
                <p class="detail">{{data.warningDetail.detail}}</p>
                <p class="guide" data-ng-bind-html="data.warningDetail.guide"></p>
            </div>
        </div>
    </div>
</div>